
<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>介绍 Webpack · test search plus plugin</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.2">
        
        
        
    
    <link rel="stylesheet" href="gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="gitbook/gitbook-plugin-search-pro/search.css">
                
            
                
                <link rel="stylesheet" href="gitbook/gitbook-plugin-fontsettings/website.css">
                
            
                
                <link rel="stylesheet" href="gitbook/gitbook-plugin-highlight/website.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="Getting-started.html" />
    
    
    <link rel="prev" href="./" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="./">
            
                <a href="./">
            
                    
                    Introduction
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.2" data-path="Introduction-to-Webpack.html">
            
                <a href="Introduction-to-Webpack.html">
            
                    
                    介绍 Webpack
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1" data-path="Getting-started.html">
            
                <a href="Getting-started.html">
            
                    
                    第一步
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.2" data-path="Running-a-workflow.html">
            
                <a href="Running-a-workflow.html">
            
                    
                    开始工作流
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.3" data-path="Automatic-browser-refresh.html">
            
                <a href="Automatic-browser-refresh.html">
            
                    
                    浏览器自动刷新
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.4" data-path="Requiring-files.html">
            
                <a href="Requiring-files.html">
            
                    
                    引入文件
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="Introduction-to-React-JS.html">
            
                <a href="Introduction-to-React-JS.html">
            
                    
                    React JS
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="Configuring-react-js.html">
            
                <a href="Configuring-react-js.html">
            
                    
                    配置 React JS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.2" data-path="Optimizing-rebundling.html">
            
                <a href="Optimizing-rebundling.html">
            
                    
                    优化重合并
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.3" data-path="Type-checking-with-flow.html">
            
                <a href="Type-checking-with-flow.html">
            
                    
                    Flow
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="CSS-Fonts-Images.md">
            
                <span>
            
                    
                    CSS, Fonts and Images
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.4.1" data-path="Loading-CSS.html">
            
                <a href="Loading-CSS.html">
            
                    
                    加载 CSS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.2" data-path="Automatic-CSS-refresh.html">
            
                <a href="Automatic-CSS-refresh.html">
            
                    
                    自动刷新 CSS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.3" data-path="Loading-LESS-or-SASS.html">
            
                <a href="Loading-LESS-or-SASS.html">
            
                    
                    加载 LESS 和 SASS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.4" data-path="Inlining-images.html">
            
                <a href="Inlining-images.html">
            
                    
                    内联 images
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.5" data-path="Inlining-fonts.html">
            
                <a href="Inlining-fonts.html">
            
                    
                    内联 fonts
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="Deployment-strategies.md">
            
                <span>
            
                    
                    部署策略
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.1" data-path="Structuring-configuration.html">
            
                <a href="Structuring-configuration.html">
            
                    
                    发布配置
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.2" data-path="Single-bundle.html">
            
                <a href="Single-bundle.html">
            
                    
                    合并成单文件
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.3" data-path="Split-app-and-vendors.html">
            
                <a href="Split-app-and-vendors.html">
            
                    
                    分离应用和第三方
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.4" data-path="Multiple-entry-points.html">
            
                <a href="Multiple-entry-points.html">
            
                    
                    多重入口
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.5" data-path="Lazy-loaded-entry-points.html">
            
                <a href="Lazy-loaded-entry-points.html">
            
                    
                    懒加载入口文件
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.6" data-path="Isomorphic-app.html">
            
                <a href="Isomorphic-app.html">
            
                    
                    同构渲染
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="Wing-It-Like-a-Pro.html">
            
                <a href="Wing-It-Like-a-Pro.html">
            
                    
                    进阶
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.6.1" data-path="Optimizing-development.html">
            
                <a href="Optimizing-development.html">
            
                    
                    优化开发
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.2" data-path="Hot-loading-components.html">
            
                <a href="Hot-loading-components.html">
            
                    
                    热加载组件
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.3" data-path="JavaScript-next.html">
            
                <a href="JavaScript-next.html">
            
                    
                    使用下一代 JavaScript
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.4" data-path="Optimizing-caching.html">
            
                <a href="Optimizing-caching.html">
            
                    
                    优化缓存
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.5" data-path="Matchers.html">
            
                <a href="Matchers.html">
            
                    
                    匹配器
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.6" data-path="Lazy-loading-entry-points.md">
            
                <span>
            
                    
                    懒加载入口
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.7" data-path="Creating-a-common-bundle.md">
            
                <span>
            
                    
                    创建一个复用代码
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.8" data-path="Understanding-chunks.html">
            
                <a href="Understanding-chunks.html">
            
                    
                    理解 Chunks
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.9" data-path="Authoring-libraries.html">
            
                <a href="Authoring-libraries.html">
            
                    
                    创建库
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            Published with GitBook
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="." >介绍 Webpack</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <p>In web development we deal with a lot of small technical artifacts. You use HTML to describe page structure, CSS how to style it and JavaScript for logic. Or you can replace HTML with something like Jade, CSS with Sass or LESS, JavaScript with CoffeeScript, TypeScript and the ilk. In addition you have to deal with project dependencies (ie. external libraries and such).</p>
<p>&#x5728; Web &#x5F00;&#x53D1;&#x5386;&#x7A0B;&#x4E0A;&#xFF0C;&#x6211;&#x4EEC;&#x6784;&#x5EFA;&#x4E86;&#x5F88;&#x591A;&#x5C0F;&#x578B;&#x7684;&#x6280;&#x672F;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#xFF0C;&#x6BD4;&#x5982;&#x7528; HTML &#x53BB;&#x63CF;&#x8FF0;&#x9875;&#x9762;&#x7ED3;&#x6784;&#xFF0C;CSS &#x53BB;&#x63CF;&#x8FF0;&#x9875;&#x9762;&#x6837;&#x5F0F;&#xFF0C;JavaScript &#x53BB;&#x63CF;&#x8FF0;&#x9875;&#x9762;&#x903B;&#x8F91;&#xFF0C;&#x6216;&#x8005;&#x4F60;&#x4E5F;&#x53EF;&#x4EE5;&#x7528;&#x4E00;&#x4E9B;&#x6BD4;&#x5982; Jade &#x53BB;&#x53D6;&#x4EE3; HTML&#xFF0C;&#x7528; Sass &#x6216; Less &#x53BB;&#x53D6;&#x4EE3;CSS&#xFF0C;&#x7528; CoffeeScript &#x6216;&#x8005; TypeScript &#x4E4B;&#x7C7B;&#x7684;&#x53BB;&#x53D6;&#x4EE3; JavaScript&#xFF0C;&#x4E0D;&#x8FC7;&#x9879;&#x76EE;&#x4E2D;&#x7684;&#x4F9D;&#x8D56;&#x53EF;&#x80FD;&#x662F;&#x4E00;&#x4EF6;&#x6BD4;&#x8F83;&#x70E6;&#x607C;&#x7684;&#x4E8B;&#x60C5;&#x3002;&#xFF08;&#x9700;&#x8981;&#x5B89;&#x88C5;&#x989D;&#x5916;&#x5F88;&#x591A;&#x7684;&#x5E93;&#xFF09;</p>
<p>There are good reasons why we use these various technologies. Regardless of what we use, however, we still want to end up with something that can be run on the browsers of the clients. This is where build systems come in. Historically speaking there have been many. <a href="https://en.wikipedia.org/wiki/Make_%28software%29" target="_blank">Make</a> is perhaps the most known one and still a viable option in many cases. In the world of frontend development particularly <a href="http://gruntjs.com/" target="_blank">Grunt</a> and <a href="http://gulpjs.com/" target="_blank">Gulp</a> have gained popularity. Both are made powerful by plugins. <a href="https://www.npmjs.com/" target="_blank">NPM</a>, the Node.js package manager, is full of those.</p>
<p>&#x8FD9;&#x91CC;&#x6709;&#x5F88;&#x591A;&#x4E3A;&#x4EC0;&#x4E48;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x5C1D;&#x8BD5;&#x90A3;&#x4E9B;&#x65B0;&#x6280;&#x672F;&#x7684;&#x7406;&#x7531;&#x3002;&#x4E0D;&#x7BA1;&#x6211;&#x4EEC;&#x7528;&#x4EC0;&#x4E48;&#xFF0C;&#x603B;&#x4E4B;&#xFF0C;&#x6211;&#x4EEC;&#x8FD8;&#x662F;&#x5E0C;&#x671B;&#x4F7F;&#x7528;&#x90A3;&#x4E9B;&#x80FD;&#x591F;&#x5904;&#x7406;&#x5728;&#x6D4F;&#x89C8;&#x5668;&#x7AEF;&#x7684;&#x65B9;&#x6848;&#xFF0C;&#x6240;&#x4EE5;&#x51FA;&#x6765;&#x4E86;&#x7F16;&#x8BD1;&#x65B9;&#x6848;&#x3002;&#x5386;&#x53F2;&#x4E0A;&#x5DF2;&#x7ECF;&#x6709;&#x5F88;&#x591A;&#x5206;&#x4EAB;&#x4E86;&#xFF0C;&#x6BD4;&#x5982; <a href="https://en.wikipedia.org/wiki/Make_%28software%29" target="_blank">Make</a> &#x53EF;&#x80FD;&#x662F;&#x5F88;&#x591A;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#x4E2D;&#x6700;&#x77E5;&#x540D;&#x4E14;&#x662F;&#x53EF;&#x884C;&#x7684;&#x65B9;&#x6848;&#x3002;<a href="http://gruntjs.com/" target="_blank">Grunt</a> &#x548C; <a href="http://gulpjs.com/" target="_blank">Gulp</a> &#x662F;&#x5728;&#x662F;&#x524D;&#x7AEF;&#x7684;&#x4E16;&#x754C;&#x4E2D;&#x6700;&#x6D41;&#x884C;&#x7684;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#xFF0C;&#x4ED6;&#x4EEC;&#x4E24;&#x4E2A;&#x90FD;&#x6709;&#x5F88;&#x591A;&#x975E;&#x5E38;&#x6709;&#x7528;&#x7684;&#x63D2;&#x4EF6;&#x3002;<a href="https://www.npmjs.com/" target="_blank">NPM</a>&#xFF08;Node.js &#x7684;&#x5305;&#x7BA1;&#x7406;&#x5668;&#xFF09;&#x5219;&#x5305;&#x542B;&#x4E86;&#x4ED6;&#x4EEC;&#x4E24;&#x4E2A;&#x3002;</p>
<h2 id="grunt">Grunt</h2>
<p>Grunt is the older project. It relies on plugin specific configuration. This is fine up to a point but believe me, you don&apos;t want to end up having to maintain a 300 line <code>Gruntfile</code>. The approach simply turns against itself at some point. Just in case you are curious what the configuration looks like, here&apos;s an example from <a href="http://gruntjs.com/sample-gruntfile" target="_blank">Grunt documentation</a>:</p>
<p>Grunt &#x662F;&#x76F8;&#x6BD4;&#x540E;&#x9762;&#x51E0;&#x4E2A;&#x66F4;&#x65E9;&#x7684;&#x9879;&#x76EE;&#xFF0C;&#x4ED6;&#x4F9D;&#x8D56;&#x4E8E;&#x5404;&#x79CD;&#x63D2;&#x4EF6;&#x7684;&#x914D;&#x7F6E;&#x3002;&#x8FD9;&#x662F;&#x4E00;&#x4E2A;&#x5F88;&#x597D;&#x7684;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#xFF0C;&#x4F46;&#x662F;&#x8BF7;&#x76F8;&#x4FE1;&#x6211;&#xFF0C;&#x4F60;&#x4E0D;&#x4F1A;&#x60F3;&#x770B;&#x5230;&#x4E00;&#x4E2A; 300 &#x884C;&#x7684; <code>Gruntfile</code>&#x3002;&#x5982;&#x679C;&#x4F60;&#x597D;&#x5947; Grunt &#x7684;&#x914D;&#x7F6E;&#x4F1A;&#x5982;&#x4F55;&#xFF0C;&#x90A3;&#x4E48;&#x8FD9;&#x91CC;&#x662F;&#x6709;&#x4E2A;&#x4ECE; <a href="http://gruntjs.com/sample-gruntfile" target="_blank">Grunt &#x6587;&#x6863;</a> &#x7684;&#x4F8B;&#x5B50;&#xFF1A;</p>
<pre><code class="lang-javascript"><span class="hljs-built_in">module</span>.exports = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">grunt</span>) </span>{

  grunt.initConfig({
    jshint: {
      files: [<span class="hljs-string">&apos;Gruntfile.js&apos;</span>, <span class="hljs-string">&apos;src/**/*.js&apos;</span>, <span class="hljs-string">&apos;test/**/*.js&apos;</span>],
      options: {
        globals: {
          jQuery: <span class="hljs-literal">true</span>
        }
      }
    },
    watch: {
      files: [<span class="hljs-string">&apos;&lt;%= jshint.files %&gt;&apos;</span>],
      tasks: [<span class="hljs-string">&apos;jshint&apos;</span>]
    }
  });

  grunt.loadNpmTasks(<span class="hljs-string">&apos;grunt-contrib-jshint&apos;</span>);
  grunt.loadNpmTasks(<span class="hljs-string">&apos;grunt-contrib-watch&apos;</span>);

  grunt.registerTask(<span class="hljs-string">&apos;default&apos;</span>, [<span class="hljs-string">&apos;jshint&apos;</span>]);

};
</code></pre>
<h2 id="gulp">Gulp</h2>
<p>Gulp takes a different approach. Instead of relying on configuration per plugin you deal with actual code. Gulp builds on top of the tried and true concept of piping. If you are familiar with Unix, it&apos;s the same here. You simply have sources, filters and sinks. In this case sources happen to match to some files, filters perform some operations on those (ie. convert to JavaScript) and then output to sinks (your build directory etc.). Here&apos;s a sample <code>Gulpfile</code> to give you a better idea of the approach taken from the project README and abbreviated a bit:</p>
<p>Gulp &#x63D0;&#x4F9B;&#x4E86;&#x4E00;&#x4E2A;&#x4E0D;&#x4E00;&#x6837;&#x7684;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#xFF0C;&#x800C;&#x4E0D;&#x662F;&#x4F9D;&#x8D56;&#x4E8E;&#x5404;&#x79CD;&#x63D2;&#x4EF6;&#x7684;&#x914D;&#x7F6E;&#x3002;Gulp &#x4F7F;&#x7528;&#x4E86;&#x4E00;&#x4E2A;&#x6587;&#x4EF6;&#x6D41;&#x7684;&#x6982;&#x5FF5;&#x3002;&#x5982;&#x679C;&#x4F60;&#x719F;&#x6089; Unix&#xFF0C;&#x90A3;&#x4E48; Gulp &#x5BF9;&#x4F60;&#x6765;&#x8BF4;&#x4F1A;&#x5DEE;&#x4E0D;&#x591A;&#xFF0C;Gulp &#x4F1A;&#x63D0;&#x4F9B;&#x4F60;&#x4E00;&#x4E9B;&#x7B80;&#x5355;&#x5316;&#x7684;&#x64CD;&#x4F5C;&#x3002;&#x5728;&#x8FD9;&#x4E2A;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#x4E2D;&#xFF0C;&#x662F;&#x53BB;&#x5339;&#x914D;&#x4E00;&#x4E9B;&#x6587;&#x4EF6;&#x7136;&#x540E;&#x64CD;&#x4F5C;&#xFF08;&#x5C31;&#x662F;&#x8BF4;&#x548C; JavaScript &#x76F8;&#x53CD;&#xFF09;&#x7136;&#x540E;&#x8F93;&#x51FA;&#x7ED3;&#x679C;&#xFF08;&#x6BD4;&#x5982;&#x8F93;&#x51FA;&#x5728;&#x4F60;&#x8BBE;&#x7F6E;&#x7684;&#x7F16;&#x8BD1;&#x8DEF;&#x5F84;&#x7B49;&#xFF09;&#x3002;&#x8FD9;&#x91CC;&#x6709;&#x4E00;&#x4E2A;&#x7B80;&#x5355;&#x7684; <code>Gulpfile</code> &#x7684;&#x4F8B;&#x5B50;&#xFF1A;</p>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> gulp = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;gulp&apos;</span>);
<span class="hljs-keyword">var</span> coffee = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;gulp-coffee&apos;</span>);
<span class="hljs-keyword">var</span> concat = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;gulp-concat&apos;</span>);
<span class="hljs-keyword">var</span> uglify = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;gulp-uglify&apos;</span>);
<span class="hljs-keyword">var</span> sourcemaps = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;gulp-sourcemaps&apos;</span>);
<span class="hljs-keyword">var</span> del = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;del&apos;</span>);

<span class="hljs-keyword">var</span> paths = {
  scripts: [<span class="hljs-string">&apos;client/js/**/*.coffee&apos;</span>, <span class="hljs-string">&apos;!client/external/**/*.coffee&apos;</span>],
};

<span class="hljs-comment">// &#x4E0D;&#x662F;&#x6240;&#x6709;&#x7684;&#x4EFB;&#x52A1;&#x9700;&#x8981;&#x4F7F;&#x7528; streams</span>
<span class="hljs-comment">// &#x4E00;&#x4E2A; gulpfile &#x53EA;&#x662F;&#x53E6;&#x4E00;&#x4E2A;node&#x7684;&#x7A0B;&#x5E8F;&#xFF0C;&#x6240;&#x4EE5;&#x4F60;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x6240;&#x6709; npm &#x7684;&#x5305;</span>
gulp.task(<span class="hljs-string">&apos;clean&apos;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">cb</span>) </span>{
  <span class="hljs-comment">// &#x4F60;&#x53EF;&#x4EE5;&#x7528; `gulp.src` &#x6765;&#x4F7F;&#x7528;&#x591A;&#x91CD;&#x901A;&#x914D;&#x7B26;&#x6A21;&#x5F0F;</span>
  del([<span class="hljs-string">&apos;build&apos;</span>], cb);
});

gulp.task(<span class="hljs-string">&apos;scripts&apos;</span>, [<span class="hljs-string">&apos;clean&apos;</span>], <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-comment">// &#x538B;&#x7F29;&#x548C;&#x590D;&#x5236;&#x6240;&#x6709; JavaScript &#xFF08;&#x9664;&#x4E86;&#x7B2C;&#x4E09;&#x65B9;&#x5E93;&#xFF09;</span>
  <span class="hljs-comment">// &#x52A0;&#x4E0A; sourcemaps</span>
  <span class="hljs-keyword">return</span> gulp.src(paths.scripts)
    .pipe(sourcemaps.init())
      .pipe(coffee())
      .pipe(uglify())
      .pipe(concat(<span class="hljs-string">&apos;all.min.js&apos;</span>))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(<span class="hljs-string">&apos;build/js&apos;</span>));
});

<span class="hljs-comment">// &#x76D1;&#x542C;&#x6587;&#x4EF6;&#x4FEE;&#x6539;</span>
gulp.task(<span class="hljs-string">&apos;watch&apos;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
  gulp.watch(paths.scripts, [<span class="hljs-string">&apos;scripts&apos;</span>]);
});

<span class="hljs-comment">// &#x9ED8;&#x8BA4;&#x4EFB;&#x52A1;&#xFF08;&#x5C31;&#x662F;&#x4F60;&#x5728;&#x547D;&#x4EE4;&#x884C;&#x8F93;&#x5165; `gulp` &#x65F6;&#x8FD0;&#x884C;&#xFF09;</span>
gulp.task(<span class="hljs-string">&apos;default&apos;</span>, [<span class="hljs-string">&apos;watch&apos;</span>, <span class="hljs-string">&apos;scripts&apos;</span>]);
</code></pre>
<p>Given the configuration is code you can always just hack it if you run into troubles. You can wrap existing Node.js modules as Gulp plugins and so on. You still end up writing a lot of boilerplate for casual tasks, though.</p>
<p>&#x8FD9;&#x4E9B;&#x914D;&#x7F6E;&#x90FD;&#x662F;&#x4EE3;&#x7801;&#xFF0C;&#x6240;&#x4EE5;&#x5F53;&#x4F60;&#x9047;&#x5230;&#x95EE;&#x9898;&#x4E5F;&#x53EF;&#x4EE5;&#x4FEE;&#x6539;&#xFF0C;&#x4F60;&#x4E5F;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x5DF2;&#x7ECF;&#x5B58;&#x5728;&#x7684; Gulp &#x63D2;&#x4EF6;&#xFF0C;&#x4F46;&#x662F;&#x4F60;&#x8FD8;&#x662F;&#x9700;&#x8981;&#x5199;&#x4E00;&#x5806;&#x6A21;&#x677F;&#x4EFB;&#x52A1;&#x3002;</p>
<h2 id="browserify">Browserify</h2>
<p>Dealing with JavaScript modules has always been a bit of a problem given the language actually doesn&apos;t have a concept of module till ES6. Ergo we are stuck with the 90s when it comes to browser environment. Various solutions, including <a href="http://browserify.org/" target="_blank">AMD</a>, have been proposed. In practice it can be useful just to use CommonJS, the Node.js format, and let tooling deal with the rest. The advantage is that you can often hook into NPM and avoid reinventing the wheel.</p>
<p>&#x5904;&#x7406; JavaScript &#x6A21;&#x5757;&#x4E00;&#x76F4;&#x662F;&#x4E00;&#x4E2A;&#x5927;&#x95EE;&#x9898;&#xFF0C;&#x56E0;&#x4E3A;&#x8FD9;&#x4E2A;&#x8BED;&#x8A00;&#x5728; ES6 &#x4E4B;&#x524D;&#x6CA1;&#x6709;&#x8FD9;&#x65B9;&#x9762;&#x7684;&#x6982;&#x5FF5;&#x3002;&#x56E0;&#x6B64;&#x6211;&#x4EEC;&#x8FD8;&#x662F;&#x505C;&#x7559;&#x5728;90&#x5E74;&#x4EE3;&#xFF0C;&#x5404;&#x79CD;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#xFF0C;&#x6BD4;&#x5982;&#x63D0;&#x51FA;&#x4E86; <a href="http://browserify.org/" target="_blank">AMD</a>&#x3002;&#x5728;&#x5B9E;&#x8DF5;&#x4E2D;&#x53EA;&#x4F7F;&#x7528; CommonJS &#xFF08; Node.js &#x6240;&#x91C7;&#x7528;&#x7684;&#x683C;&#x5F0F;&#xFF09;&#x4F1A;&#x6BD4;&#x8F83;&#x6709;&#x5E2E;&#x52A9;&#xFF0C;&#x800C;&#x8BA9;&#x5DE5;&#x5177;&#x53BB;&#x5904;&#x7406;&#x5269;&#x4E0B;&#x7684;&#x4E8B;&#x60C5;&#x3002;&#x5B83;&#x7684;&#x4F18;&#x52BF;&#x662F;&#x4F60;&#x53EF;&#x4EE5;&#x53D1;&#x5E03;&#x5230; NPM &#x4E0A;&#x6765;&#x907F;&#x514D;&#x91CD;&#x65B0;&#x53D1;&#x660E;&#x8F6E;&#x5B50;&#x3002;</p>
<p><a href="http://browserify.org/" target="_blank">Browserify</a> solves this problem. It provides a way to bundle CommonJS modules together. You can hook it up with Gulp. In addition there are tons of smaller transformation tools that allow you to move beyond the basic usage (ie. <a href="https://www.npmjs.com/package/watchify" target="_blank">watchify</a> provides a file watcher that creates bundles for you during development automatically). This will save some effort and no doubt is a good solution up to a point.</p>
<p><a href="http://browserify.org/" target="_blank">Browserify</a> &#x89E3;&#x51B3;&#x4E86;&#x8FD9;&#x4E2A;&#x95EE;&#x9898;&#xFF0C;&#x5B83;&#x63D0;&#x4F9B;&#x4E86;&#x4E00;&#x79CD;&#x53EF;&#x4EE5;&#x628A;&#x6A21;&#x5757;&#x96C6;&#x5408;&#x5230;&#x4E00;&#x8D77;&#x7684;&#x65B9;&#x5F0F;&#x3002;&#x4F60;&#x53EF;&#x4EE5;&#x7528; Gulp &#x8C03;&#x7528;&#x5B83;&#xFF0C;&#x6B64;&#x5916;&#x6709;&#x5F88;&#x591A;&#x8F6C;&#x6362;&#x5C0F;&#x5DE5;&#x5177;&#x53EF;&#x4EE5;&#x8BA9;&#x4F60;&#x66F4;&#x517C;&#x5BB9;&#x7684;&#x4F7F;&#x7528;&#xFF08;&#x6BD4;&#x5982; <a href="https://www.npmjs.com/package/watchify" target="_blank">watchify</a> &#x63D0;&#x4F9B;&#x4E86;&#x4E00;&#x4E2A;&#x6587;&#x4EF6;&#x76D1;&#x89C6;&#x5668;&#x5E2E;&#x52A9;&#x4F60;&#x5728;&#x5F00;&#x53D1;&#x8FC7;&#x7A0B;&#x4E2D;&#x66F4;&#x52A0;&#x81EA;&#x52A8;&#x5316;&#x5730;&#x628A;&#x6587;&#x4EF6;&#x5408;&#x5E76;&#x8D77;&#x6765;&#xFF09;&#xFF0C;&#x8FD9;&#x6837;&#x4F1A;&#x7701;&#x4E0B;&#x5F88;&#x591A;&#x7CBE;&#x529B;&#x3002;&#x6BCB;&#x5EB8;&#x7F6E;&#x7591;&#xFF0C;&#x4E00;&#x5B9A;&#x7A0B;&#x5EA6;&#x6765;&#x8BB2;&#xFF0C;&#x8FD9;&#x662F;&#x4E00;&#x4E2A;&#x5F88;&#x597D;&#x7684;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#x3002;</p>
<h2 id="webpack">Webpack</h2>
<p>Webpack expands on the idea of hooking into CommonJS <code>require</code>. What if you could just <code>require</code> whatever you needed in your code, be it CoffeeScript, Sass, Markdown or something? Well, Webpack does just this. It takes your dependencies, puts them through loaders and outputs browser compatible static assets. All of this is based on configuration. Here is a sample configuration from <a href="http://webpack.github.io/docs/tutorials/getting-started/" target="_blank">the official Webpack tutorial</a>:</p>
<p>Webpack &#x6269;&#x5C55;&#x4E86; CommonJs &#x7684; <code>require</code> &#x7684;&#x60F3;&#x6CD5;&#xFF0C;&#x6BD4;&#x5982;&#x4F60;&#x60F3;&#x5728; CoffeeScript&#x3001;Sass&#x3001;Markdown &#x6216;&#x8005;&#x5176;&#x4ED6;&#x4EC0;&#x4E48;&#x4EE3;&#x7801;&#x4E2D; <code>require</code> &#x4F60;&#x60F3;&#x8981;&#x7684;&#x4EFB;&#x4F55;&#x4EE3;&#x7801;&#x7684;&#x8BDD;&#xFF1F;&#x90A3;&#x4E48; Webpack &#x6B63;&#x662F;&#x505A;&#x8FD9;&#x65B9;&#x9762;&#x7684;&#x5DE5;&#x4F5C;&#x3002;&#x5B83;&#x4F1A;&#x901A;&#x8FC7;&#x914D;&#x7F6E;&#x6765;&#x53D6;&#x51FA;&#x4EE3;&#x7801;&#x4E2D;&#x7684;&#x4F9D;&#x8D56;&#xFF0C;&#x7136;&#x540E;&#x628A;&#x4ED6;&#x4EEC;&#x901A;&#x8FC7;&#x52A0;&#x8F7D;&#x5668;&#x628A;&#x4EE3;&#x7801;&#x517C;&#x5BB9;&#x5730;&#x8F93;&#x51FA;&#x5230;&#x9759;&#x6001;&#x8D44;&#x6E90;&#x4E2D;&#x3002;&#x8FD9;&#x91CC;&#x662F;&#x4E00;&#x4E2A; <a href="http://webpack.github.io/docs/tutorials/getting-started/" target="_blank">Webpack &#x5B98;&#x7F51;</a> &#x4E0A;&#x7684;&#x4F8B;&#x5B50;&#xFF1A; </p>
<pre><code class="lang-javascript"><span class="hljs-built_in">module</span>.exports = {
    entry: <span class="hljs-string">&quot;./entry.js&quot;</span>,
    output: {
        path: __dirname,
        filename: <span class="hljs-string">&quot;bundle.js&quot;</span>
    },
    <span class="hljs-built_in">module</span>: {
        loaders: [
            { test: <span class="hljs-regexp">/\.css$/</span>, loader: <span class="hljs-string">&quot;style!css&quot;</span> }
        ]
    }
};
</code></pre>
<p>In the following sections we&apos;ll build on top of this idea and show how powerful it is. You can, and probably should, use Webpack with some other tools. It won&apos;t solve everything. It does solve the difficult problem of bundling, however, and that&apos;s one worry less during development.</p>
<p>&#x5728;&#x63A5;&#x4E0B;&#x6765;&#x7684;&#x7AE0;&#x8282;&#x4E2D;&#x6211;&#x4EEC;&#x4F1A;&#x4F7F;&#x7528; Webpack &#x6765;&#x6784;&#x5EFA;&#x9879;&#x76EE;&#x6765;&#x5C55;&#x793A;&#x5B83;&#x7684;&#x80FD;&#x529B;&#x3002;&#x4F60;&#x53EF;&#x4EE5;&#x7528;&#x5176;&#x4ED6;&#x5DE5;&#x5177;&#x548C; Webpack &#x4E00;&#x8D77;&#x4F7F;&#x7528;&#x3002;&#x5B83;&#x4E0D;&#x4F1A;&#x89E3;&#x51B3;&#x6240;&#x6709;&#x4E8B;&#x60C5;&#xFF0C;&#x53EA;&#x662F;&#x89E3;&#x51B3;&#x4E00;&#x4E2A;&#x6253;&#x5305;&#x7684;&#x96BE;&#x9898;&#xFF0C;&#x65E0;&#x8BBA;&#x5982;&#x4F55;&#xFF0C;&#x8FD9;&#x662F;&#x5728;&#x5F00;&#x53D1;&#x8FC7;&#x7A0B;&#x4E2D;&#x9700;&#x8981;&#x89E3;&#x51B3;&#x7684;&#x95EE;&#x9898;&#x3002;</p>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="./" class="navigation navigation-prev " aria-label="Previous page: Introduction">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="Getting-started.html" class="navigation navigation-next " aria-label="Next page: 第一步">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"介绍 Webpack","level":"1.2","depth":1,"next":{"title":"第一步","level":"1.2.1","depth":2,"path":"Getting-started.md","ref":"Getting-started.md","articles":[]},"previous":{"title":"Introduction","level":"1.1","depth":1,"path":"README.md","ref":"README.md","articles":[]},"dir":"ltr"},"config":{"plugins":["-lunr","-search","search-pro","fontsettings","livereload"],"root":"./content","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"search-pro":{},"fontsettings":{"theme":"white","family":"sans","size":2},"livereload":{},"highlight":{},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{"version":"0.0.0"},"title":"test search plus plugin","gitbook":"*"},"file":{"path":"Introduction-to-Webpack.md","mtime":"2017-01-24T08:51:37.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-01-24T08:53:13.796Z"},"basePath":".","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="gitbook/gitbook.js"></script>
    <script src="gitbook/theme.js"></script>
    
        
        <script src="gitbook/gitbook-plugin-search-pro/jquery.mark.min.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-search-pro/search.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-livereload/plugin.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    

    </body>
</html>

